// Load the application once the DOM is ready, using `jQuery.ready`:
$(function(){

	// Friend Model
	window.Friend = Backbone.Model.extend({

		// Default attributes for a friend item.
		defaults: function() {
			return {
				gift: "toothbrush"
			};
		}
	});

	// Friends Collection
	window.FriendsList = Backbone.Collection.extend({

		// Reference to this collection's model.
		model: Friend,

		// Save all of the friends under the `"friends"` namespace.
		localStorage: new Store("friends"),

	});

	// Create our global collection of **Friends**.
	window.Friends = new FriendsList;

	// Friend View
	// The DOM element for a friend...
	window.FriendView = Backbone.View.extend({
		//... is a list tag.
		tagName:  "li",

		// Cache the template function for a single item.
		template: _.template($('#friend-template').html()),

		// The DOM events specific to an item.
		//events: {
		//"click .check"              : "toggleDone",
		//"dblclick div.todo-text"    : "edit",
		//"click span.todo-destroy"   : "clear",
		//"keypress .todo-input"      : "updateOnEnter"
		//},

		// The FriendView listens for changes to its model, re-rendering.
		initialize: function() {

			this.model.bind('change', this.render, this);
			this.render();
		//this.model.bind('destroy', this.remove, this);
		},

		// Re-render the contents of the todo item.
		render: function() {
			  $(this.el).html(this.template(this.model.toJSON()));
			  this.setText();
			  return this;
		},

		// To avoid XSS (not that it would be harmful in this particular app),
		// we use `jQuery.text` to set the contents of the todo item.
		setText: function() {
			var name = this.model.get('name');
			var gift = this.model.get('gift');
			this.$('.friend-name').text(name);
			this.$('.friend-gift').text(gift);
	
		}
	});

	// The Application
	// Our overall **AppView** is the top-level piece of UI.
	window.AppView = Backbone.View.extend({

		// Instead of generating a new element, bind to the existing skeleton of
		// the App already present in the HTML.
		el: $("#friends-div"),

		// Our template for the line of statistics at the bottom of the app.
		//statsTemplate: _.template($('#stats-template').html()),

		// Delegated events for creating new items, and clearing completed ones.
		//events: {
		//	"keypress #new-todo":  "createOnEnter",
		//	"keyup #new-todo":     "showTooltip",
		//	"click .todo-clear a": "clearCompleted"
		//},

		// At initialization we bind to the relevant events on the `Friends`
		// collection, when items are added or changed. Kick things off by
		// loading any preexisting todos that might be saved in *localStorage*.
		initialize: function() {
			//this.input = this.$("#new-todo");
			Friends.bind('add',   this.addOne, this);
			Friends.bind('reset', this.addAll, this);
			Friends.bind('all',   this.render, this);
			Friends.fetch();
			
			Friends.create({name: 'bob'});
			this.render();
			this.addAll();	
	//		alert("What the fuck");
		},

		// Re-rendering the App just means refreshing the statistics -- the rest
		// of the app doesn't change.
		render: function() {
			 // this.$('#todo-stats').html(this.statsTemplate({
			//total:      Todos.length,
			//done:       Todos.done().length,
			//remaining:  Todos.remaining().length
		//}));
		},

		// Add a single friend item to the list by creating a view for it, and
		// appending its element to the `<ul>`.
		addOne: function(friend) {
			  var view = new FriendView({model: friend});
			  this.$("#friend-list").append(view.render().el);
		  },

		  // Add all items in the **Friends** collection at once.
		addAll: function() {
			  Friends.each(this.addOne);
		  }

		  // If you hit return in the main input field, and there is text to save,
		  // create new **Todo** model persisting it to *localStorage*.
			//createOnEnter: function(e) {
			//			var text = this.input.val();
			//			if (!text || e.keyCode != 13) return;
			//			Todos.create({text: text});
			//			this.input.val('');
			//		},

			//// Clear all done todo items, destroying their models.
			//clearCompleted: function() {
			//			 _.each(Todos.done(), function(todo){ todo.destroy(); });
			//			 return false;
			//		 },

			//		 // Lazily show the tooltip that tells you to press `enter` to save
			//		 // a new todo item, after one second.
			//showTooltip: function(e) {
			//		 var tooltip = this.$(".ui-tooltip-top");
			//		 var val = this.input.val();
			//		 tooltip.fadeOut();
			///		 if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
				//	 if (val == '' || val == this.input.attr('placeholder')) return;
				//	 var show = function(){ tooltip.show().fadeIn(); };
				//	 this.tooltipTimeout = _.delay(show, 1000);
				// }

});

// Finally, we kick things off by creating the **App**.
window.App = new AppView;

});
